<template>
  <a-range-picker
    :show-time="{
      hideDisabledOptions: true,
      defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
    }"
    v-model="myValue"
    :format="format"
    @change="onChange"
  />
</template>
<script>
import moment from 'moment'
export default {
  name: 'RangePicker',
  data () {
    return {
      myValue: []
    }
  },
  components: {

  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    value: {
        type: Array
    },
    format: {
      type: String,
      default () {
        return 'YYYY-MM-DD HH:mm:ss'
      }
    }
  },
  watch: {
    value (newVal) {
      this.myValue[0] = !newVal[0] ? null : moment(newVal[0])
      this.myValue[1] = !newVal[1] ? null : moment(newVal[1])
    }
  },
  methods: {
    moment,
    onChange (value, dateString) {
      // console.log('Selected Time: ', value)
      // console.log('Formatted Selected Time: ', dateString)
      this.$emit('change', dateString)
    }
  }
}
</script>
